<template>
  <div class="bodys">
    <!-- 头部固定搜索框 -->
    <div class="header">
      <div class="icon"><van-icon name="apps-o" /></div>
      <div class="search">
        <van-search shape="round" placeholder="大前端开发，混合京东商城系统" />
      </div>
      <div class="icon"><van-icon name="chat-o" /></div>
    </div>
    <!-- 轮播图 -->
    <div class="swipers">
      <van-swipe :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="item in swipers" :key="item.id">
          <img :src="item.icon" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 贴图 -->
    <div class="map">
      <img src="http://imooc.res.lgdsunday.club/520-1.gif" alt="">
      <img src="http://imooc.res.lgdsunday.club/520-2.gif" alt="">
      <img src="http://imooc.res.lgdsunday.club/520-3.gif" alt="">
    </div>
    <!-- 九宫格 -->
    <div class="gong">
      <div class="grid" v-for="item in gong" @click="goodsList">
        <img :src="item.src" alt="">
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 秒杀 -->
    <div class="Lightningtop">
      <span>京东秒杀</span>
      <span class="red">16点场</span>
      <span class="mon">{{ h }}:{{ m }}:{{ s }}</span>
    </div>
    <div class="Lightning">
      <div class="deals">
        <div class="dealsitem" v-for="item in Lightnings" :key="item.id">
          <img class="imgs" :src="item.icon" alt="">
          <p>￥{{ item.price }}</p>
          <del>￥{{ item.oldPrice }}</del>
        </div>
      </div>
    </div>
    <!-- 贴图 -->
    <div class="maps">
      <img src="http://imooc.hybrid.lgdsunday.club/img/haoHuoQiang.a976e93f.gif" alt="">
    </div>
    <!-- 瀑布流布局 -->
    <van-row>
      <van-col span="12">
        <div class="goods" v-for="(item, index) in goodslistleft" :key="item.id" @click="goodsDetails(item.id, index)">
          <img :src="item.img" alt="" :style="{ height: (Math.random() * (220 - 180) + 180) + 'px' }">
          <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
          <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
          <p class="texts">{{ item.name }}</p>
          <span class="left">￥{{ item.price }}</span>
          <span class="right">销量: {{ item.volume }}</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="goods" v-for="(item, index) in goodslistright" :key="item.id"
          @click="goodsDetailsr(item.id, index)">
          <img :src="item.img" alt="" :style="{ height: (Math.random() * (220 - 180) + 180) + 'px' }">
          <van-tag type="danger" v-if="item.isDirect">自营</van-tag>
          <van-tag color="#ccc" v-if="!item.isHave">缺货</van-tag>
          <p class="texts">{{ item.name }}</p>
          <span class="left">￥{{ item.price }}</span>
          <span class="right">销量: {{ item.volume }}</span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getswiper, getseconds, getgoods } from "../api/index.js";
import { showToast } from 'vant';

const swipers = ref([])
// 轮播图
const getswipers = async () => {
  const res = await getswiper()
  console.log(res.data.data);
  swipers.value = res.data.data.list
}
getswipers()

const gong = ref([{ name: '京东超市', src: 'http://imooc.hybrid.lgdsunday.club/img/jingDongChaoShi.ad21df4d.png' }, { name: '海屯全球', src: '	http://imooc.hybrid.lgdsunday.club/img/haiTunQuanQiu.54597de3.png' }, { name: '京东服饰', src: 'http://imooc.hybrid.lgdsunday.club/img/jingDongFuShi.13729a19.png' }, { name: '京东生鲜', src: '	http://imooc.hybrid.lgdsunday.club/img/jingDongShengXian.22b8843b.png' }, { name: '京东到家', src: 'http://imooc.hybrid.lgdsunday.club/img/jingDongDaoJia.d644304a.png' }, { name: '充值缴费', src: '	http://imooc.hybrid.lgdsunday.club/img/chongZhiJiaoFei.2c954f82.png' }, { name: '9.9元拼', src: 'http://imooc.hybrid.lgdsunday.club/img/jingDongPinGou.2dad6945.png' }, { name: '领券', src: 'http://imooc.hybrid.lgdsunday.club/img/jingDongPinGou.2dad6945.png' }, { name: '赚钱', src: '	http://imooc.hybrid.lgdsunday.club/img/zhuanQian.dbaa12df.png' }, { name: '全部', src: '	http://imooc.hybrid.lgdsunday.club/img/quanBu.34bf33e3.png' }])

// 秒杀
const Lightnings = ref([])

const getdeals = async () => {
  const res = await getseconds()
  console.log(res.data.data);
  Lightnings.value = res.data.data.list
}
getdeals()
// 获取时间
const times = new Date().getTime()
const times2 = new Date('2023-02-04 16:00:00').getTime()
console.log(times);
console.log(times2);
const house = Math.floor(((times2 - times) % (24 * 3600 * 1000)) / (3600 * 1000))
const min = Math.floor(((times2 - times) % (24 * 3600 * 1000) % (3600 * 1000)) / (60 * 1000))
const sec = Math.floor((((times2 - times) % (24 * 3600 * 1000) % (60 * 1000)) % (24 * 3600 * 1000)) / (1000))

const s = ref(sec)
const m = ref(min)
const h = ref(house)
// 设置定时器
let timer = ref()
timer = setInterval(() => {
  // console.log(sec);
  if (s.value > 0) {
    s.value--
    // console.log(s.value);
  } else {
    s.value = 59
    m.value--
  }
  if (m.value < 0) {
    m.value = 59
    h.value--
  }
}, 1000);
// console.log(timer);

// 商品列表
//看不懂网上的瀑布流，就自己写个瀑布流布局，但是自己写的这个只适合少量列布局的移动端
const goodslistleft = ref([])
const goodslistright = ref([])
const getgood = async () => {
  const res = await getgoods()
  console.log(res.data.data.list);
  // goodslist.value = res.data.data.list
  for (let i = 0; i < res.data.data.list.length; i++) {
    if (i % 2 == 0) {
      // console.log(res.data.data.list[i]);
      goodslistleft.value.push(res.data.data.list[i])
    } else if (i % 2 != 0) {
      goodslistright.value.push(res.data.data.list[i])
    }
  }

}
getgood()
//商品详情
const router = useRouter()
const goodsDetails = (id, i) => {
  if (goodslistleft.value[i].isHave) {
    router.push({
      path: '/goodsDetails',
      query: {
        goodsId: id
      }
    }
    )
  } else {
    showToast('该商品无货');
  }
}
const goodsDetailsr = (id, i) => {
  if (goodslistright.value[i].isHave) {
    router.push({
      path: '/goodsDetails',
      query: {
        goodsId: id
      }
    }
    )
  } else {
    showToast('该商品无货');
  }
}

const goodsList = () => {
  router.push({ path: '/goodsList' })
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.bodys {
  background-color: rgb(218, 218, 218);
  margin-bottom: 50px;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 9999;
  display: flex;
  justify-content: space-around;
  font-size: 25px;
  text-align: center;
  background-color: rgba($color: #fff, $alpha: 0);

  .search {
    width: 80%;
    height: 100%;

    ::v-deep .van-search {
      width: 100%;
      height: 100%;
      background-color: rgba($color: #fff, $alpha: 0);
    }
  }

  .icon {
    margin-top: 20px;
    width: 10%;
    height: 100%;
    color: #fff;
  }
}

.van-swipe {
  width: 100%;
  height: 200px;
  background-color: aqua;

  img {
    width: 100%;
    height: 100%;
  }
}

.map {
  display: flex;

  img {
    width: 33%;
  }
}

.gong {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4px;
  background-color: #fff;

  .grid {
    width: 20%;
    height: 75px;
    text-align: center;

    img {
      margin: 10px 10px 3px 10px;
      width: 40px;
      height: 40px;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

.maps {
  width: 100%;

  img {
    width: 100%;
  }
}

.Lightning {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: #fff;
  text-align: center;

  .deals {
    height: 130px;
    display: flex;

    .dealsitem {
      height: 100%;
      display: flex;
      flex-direction: column;
      margin: 5px 15px;

      img {
        width: 66px;
        height: 66px;
      }

      p {
        margin: 0;
        color: rgb(236, 163, 27);
      }

      del {
        color: #999;
      }
    }
  }
}



.Lightningtop {
  background-color: #fff;
  font-size: 16px;

  .red {
    color: #fff;
    background-color: red;
    margin-left: 5px;
  }

  .mon {
    width: 30px;
    border: 1px solid red;
    color: red;
  }
}

.goods {
  margin: 8px 5px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #fff;

  img {
    width: 90%;
    margin: 2px 3px;
  }

  .texts {
    display: block;
    width: 100%;
    height: 43px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    margin-bottom: 5px;
  }

  .left {
    color: red;
  }

  .right {
    color: #999;
    float: right;
  }
}
</style>